<template>
	<view class="content">
		<view class="html" id="imageToFile"
			:style="[{ backgroundImage: `url(${obj.bg})` }, { backgroundColor: obj.bgc }, {color:obj.txc}]">
			<view :style="{padding:obj.position}">
				<view class="text1">{{ obj.teacher }}</view>
				<view class="text2">{{ obj.blessing }}</view>
				<view class="text3">{{ obj.signer }}</view>
			</view>
		</view>
		<view class="footer">
			<view class="icon">
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
					@click="color('bg')">
					<image src="../../static/bg.png"></image>
					<view style="font-size: 24rpx;">背景颜色</view>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
					@click="color('tc')">
					<image src="../../static/mbp.png"></image>
					<view style="font-size: 24rpx;">文字颜色</view>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
					@click="showModel = true">
					<image src="../../static/pic.png"></image>
					<view style="font-size: 24rpx;">背景图片</view>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
					@click="showCard = true">
					<image src="../../static/wzg.png"></image>
					<view style="font-size: 24rpx;">祝福的话</view>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
					@click="showMsg = true">
					<image src="../../static/wdt.png"></image>
					<view style="font-size: 24rpx;">卡片信息</view>
				</view>
			</view>
			<button type="primary" @click="generate">生成图片</button>
		</view>
		<!-- 弹窗 -->
		<home-msg v-if="showMsg" :text='obj' @close="showMsg = false" @input="input"></home-msg>
		<home-card v-if="showCard" :text="obj.blessing" @close="showCard = false" @retdata="retdata"></home-card>
		<home-model v-if="showModel" @close="showModel = false" @cimage="cimage"></home-model>
		<picker-color :isShow="showPickerColor" :bottom="0" @callback="getPickerColor"></picker-color>
	</view>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
	import html2canvas from 'html2canvas';
	import pickerColor from '@/components/helang-pickerColor/helang-pickerColor.vue';

	export default {
		components: {
			'picker-color': pickerColor
		},
		data() {
			return {
				obj: {
					bg: '../../static/image/bg3.jpg',
					bgc: '#ffffff',
					position: '60rpx 0',
					txc: '#eeeeee',
					teacher: '尊敬的XXX老师：',
					blessing: '在这特别的日子谨向您致以永恒的感激之情。对您的谢意，无法用语言来表达。教师节快乐！',
					signer: '您的学生XXX'
				},
				showMsg: false,
				showCard: false,
				showModel: false,
				showPickerColor: false,
				buttonColor: '#0099FF',
				bottomPickerColor: 0,
				type: ''
			};
		},
		// onLoad() {
		// 	console.log("res",resdata);
		// },
		methods: {
			input(e) {
				this.obj.teacher = e.y
				this.obj.signer = e.i
			},
			retdata(e) {
				this.obj.blessing = e
			},
			color(type) {
				this.type = type;
				this.showPickerColor = true;
			},
			getPickerColor(e) {
				switch (this.type) {
					case 'bg':
						this.obj.bgc = e;
						break;
					case 'tc':
						this.obj.txc = e;
						break;
					default:
						break;
				}
				this.showPickerColor = false;
			},
			cimage(e) {
				this.obj.bg = e.bannerfile;
				this.obj.position = e.position
			},
			generate() {
				uni.showLoading({
					title: '生成中'
				});
				const element = document.getElementById('imageToFile');
				html2canvas(element, {
					allowTaint: false,
					taintTest: true,
					useCORS: true,
				}).then(canvas => {
					let url = canvas.toDataURL('image/png');
					uni.previewImage({
						urls: [url]
					})
					uni.hideLoading();
				}).catch(err => console.log("err4", err));
			}
		}
	};
</script>

<style>
	.html {
		position: fixed;
		width: 510rpx;
		height: 620rpx;
		top: 20rpx;
		left: 20rpx;
		z-index: 1;
		padding: 200rpx 100rpx;
		box-shadow: 0 0 10px #999;
		background-size: cover;
	}

	.footer {
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		width: 710rpx;
		z-index: 11;
	}

	.icon {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 10rpx;
	}

	image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		padding: 10rpx;
		background-color: #3498db;
	}

	.text1 {
		/* font-size: 28px; */
	}

	.text2 {
		text-indent: 2rem;
		margin: 50rpx 0;
		text-align: justify;
	}

	.text3 {
		text-align: end;
	}
</style>
